<template>
	<view class="content">
		<image class="login-Bg" :src="$imgUrl('/login/loginbg.png')" />
		<image :src="$imgUrl('login/loginIcon.png')" style="position: absolute;top: 0;z-index: 5;height: 600upx;" mode=""></image>		
		<view class="login-form">
			<u-form :model="form" ref="uForm">
			  <u-form-item prop="name" left-icon="account" >
				<u-input v-model="form.username" placeholder="用户名"/>
			  </u-form-item>			  
			  <u-form-item prop="intro" left-icon="lock">
				<u-input v-model="form.password" placeholder="密码" type="password" />
			  </u-form-item>
			</u-form>
		</view>
		<view class="login-btn"  >
			<u-button  type="primary"  @click="Login">登录</u-button>
		</view>		
	</view>
</template>

<script>
	import { Login,sendGet } from '../../api/login.js';
	import storage from '@/utils/Stroage.js'
	export default {
		data() {
			return {
				form:{
					username:'',
					password:''
				},
				response:null
			}
		},
		onLoad() {
			// this.Login()
		},
		methods: {
			Login(){
				const that = this 
				if(this.form.username === '' || this.form.password === ''){
					uni.showToast({
						title:'请输入用户名和密码',
						icon:'none',
						duration:3000
					})
					return 
				}
				this.$store.dispatch('login', that.form)				
			},
			onChange(val){
			},
			sendGet(){
				let params = {
					name:1,
					code:2
				}
				sendGet(params)
			},
			ProFun(val){
				return new Promise((resolve,reject)=>{
					setTimeout(()=>resolve(321),val)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750upx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.login-Bg{
			width: 100%;
			height: 100%;
			z-index: 1;
			position: absolute;
			top: 0;
		}
		.login-form{
			width: 90%;
			height:15vh;
			background-color: #fff;
			z-index: 10;
		}
		.login-btn{
			margin-top: 36upx;
			width: 90%;
			z-index: 10000;
		}
	}
	.u-form-item--left__content__icon{
		margin-left: 24upx;
	}
</style>
